/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
this.imagePreview = function(){
    /* CONFIG */
    
    xOffset = 5;
    yOffset = 10;
    maxWidth = 400;
    maxHeight = 400;
    var sHeight = 0;
    var sWidth = 0;
    var postion = 0;
    var windosWidth = $(window).width();
	
	var pWidth = 0;
	var pHeight = 0;
    /* END CONFIG */
    $(".preview").hover(function(e){
        $('#preview').remove();
        $('.card_box').html("");
        sHeight = $(this).offset().top;
        sWidth = $(this).offset().left;
        var myWidth = $(this).width();
        var myHeight = $(this).height();
        
        var content = ""
        $.get(SITE_URL + "/index.php?app=home&mod=User&act=userInfo&uid=" + $(this).attr('rel'), {}, function(data){
            if (data) {
                var html = '<div id="preview" class="card_box" ><div class="card_box_body">\
									<div class="card_box_right"></div>\
									<div class="card_box_left"></div>' + data + '</div></div>';
                $("body").append(html);
                iw = $("#preview").width();
                ih = $("#preview").height();
                
                var nowidth = sWidth + myWidth + xOffset + iw;
                if (nowidth >= windosWidth) {
                    oleft = sWidth - (iw + xOffset);
                    postion = 1
                }
                else {
                    oleft = (sWidth + myWidth + xOffset);
                    postion = 0
                }
                
                
                otop = (sHeight - myHeight - yOffset);
                pWidth = oleft;
				pHeight = otop;
				
                $("#preview").css("top", otop + "px").css("left", oleft + "px");
                btop = sHeight - $('#preview').offset().top - myHeight - 10;
				
                if (nowidth >= windosWidth) {
                    $('.card_box_left').hide();
                    $('.card_box_right').css("top", btop).show();
                }
                else {
                    $('.card_box_right').hide();
                    $('.card_box_left').css("top", btop).show();
                }
                
            }
            
        });
        
    }, function(e){
        var pWidget = $(this).offset().left;
        var pHeight = $(this).offset().top;
		var sWidth  = pWidth+$('#preview').width();
		var sHeigth = pHeight + $('#preview').height();
        if (postion == 0) {
			
			 $(document).mousemove(function(event){
					//alert(event.pageX + 20);
		            if (event.pageX + 20 < pWidget || event.pageX +20 > sWidth ) {
						//alert(event.pageX + 20 );
						//alert(event.pageX + 20);
					//	alert(pWidget);
		               $('#preview').remove();
					   $(document).unbind('mousemove')
		            }
					
					if (event.pageY + 20 < pHeight || event.pageY +20 > sHeigth ) {
						//alert(event.pageY);
					  $('#preview').remove();
					  $(document).unbind('mousemove')
					}
			});
			

      //      if (e.pageY < pHeight) {
        //        $(document).mousemove(function(event){
          //          if (pHeight - event.pageY > 100) {
            //            $('#preview').remove();
              //          $(document).unbind('mousemove');
                //    }
                //})
 //           }
   //         
    //        if (e.pageY > pHeight) {
      //          $(document).mousemove(function(event){
        //            if (event.pageY - pHeight > 100) {
          //              $('#preview').remove();
            //            $(document).unbind('mousemove');
              ///      }
              //  })
           // }
        }
        else {
			 $(document).mousemove(function(event){
					//alert(event.pageX + 20);

		            if (event.pageX - 35  > pWidget || event.pageX - 20 < pWidth ) {
						//alert(event.pageX -  20 );
						//alert(pWidget);
						//alert(event.pageX + 20);
					//	alert(pWidget);
		               $('#preview').remove();
					   $(document).unbind('mousemove')
		            }
					
					if (event.pageY + 20 < pHeight || event.pageY +20 > sHeigth  ) {
						//alert(event.pageY);
					  $('#preview').remove();
					  $(document).unbind('mousemove')
					}
			});

        }
    });
    
}
// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

